<template>
  <PackageList
      ref="packageListRef"
      :table="table"
      :pagination="pagination"
      :loading="loading"
      :disabled="disabled"
      :isVip="isVip"
      @firstReview="(...args) => emit('firstReview', ...args)"
      @updateImage="(...args) => emit('updateImage', ...args)"
      @resetFirstReview="(...args) => emit('resetFirstReview', ...args)"
      @handleChecked="(...args) => emit('handleChecked', ...args)"
      @handleCardStatus="(...args) => emit('handleCardStatus', ...args)"
  />
</template>

<script setup name="CardList">
import {PackageList} from '@/components'
import columnsMap from '@/components/PackageList/columns'
import {useList} from '@/hooks'
import {queryCardApi} from '@/service/card'
import {onUnmounted, ref, watch} from 'vue'
import formatterFile from '@/utils/formatterFile'

const emit = defineEmits(['firstReview', 'resetFirstReview', 'handleChecked', 'handleCardStatus', 'updateImage'])
const props = defineProps({
  orderNo: String,
  prop: String,
  isVip: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const packageListRef = ref(null)

// list组件数据
const [loading, table, pagination] = useList({
  columns: columnsMap.get(props.prop),
  load: onLoad
})

// 获取卡牌列表
async function onLoad () {
  loading.value = true
  const res = await queryCardApi({
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
    orderNo: props.orderNo
  })
  if(res.code === __code) {
    table.rows = res.data?.list?.map(item => {
      const {frontImage, backImage, stickerPhoto} = formatterFile(item.orderImageInfos)
      return {
        ...item,
        frontImage: frontImage || {id: '', url: '', uid: item.cardId},
        backImage: backImage || {id: '', url: '', uid: item.cardId},
        stickerPhoto: stickerPhoto || {id: '', url: '', uid: item.cardId},
        checked: false
      }
    })
    pagination.total = res.data?.total || 0
  }
  loading.value = false
}

// 操作全选/全不选
function handleCheckedAll (val) {
  packageListRef.value.handleCheckedAll(val)
}

// 监听卡牌订单号变化更换数据
const unwatch = watch(() => [props.orderNo], () => {
  if(props.orderNo) {
    pagination.currentPage = 1
    onLoad()
  }
}, {
  immediate: true
})

onUnmounted(() => {
  // 取消监听
  unwatch()
})

defineExpose({
  handleCheckedAll,
  onLoad,
  table
})


</script>

<style lang="less" src="./index.less" module="styles"></style>
